<template>
    <view class="active-page">
        <view class="active-page-tabs">
            <scroll-view :scroll-x="true" class="scroll-tabs">
                <view
                    v-for="tab in tabs"
                    :key="tab.key"
                    :class="['tab-item', {'active': activeTab === tab.key}]"
                    @click="switchTab(tab.key)"
                >
                    {{ tab.label }}
                </view>
            </scroll-view>
        </view>
        <view class="section">
            <view v-if="activeTab === '1'" class="introduction">
                <view class="section-title">{{ $t('productDetail.active.introduction') }}</view>
                <template v-if="activeDetail.introduction.description">
                    <view
                        v-for="(item, index) in activeDetail.introduction.description"
                        :key="index"
                        class="introduction-description"
                    >
                        {{ item }}
                    </view>
                </template>
                <view class="introduction-subTitle">{{ $t('productDetail.active.features') }}</view>
                <template v-if="activeDetail.introduction.features">
                    <view
                        v-for="(item, index) in activeDetail.introduction.features"
                        :key="index"
                        class="introduction-features"
                    >
                        <text class="with-dot">{{ item }}</text>
                    </view>
                </template>
                <template v-if="activeDetail.introduction.imageUrlList">
                    <view
                        v-for="(item, index) in activeDetail.introduction.imageUrlList"
                        :key="index"
                        class="introduction-imageUrlList"
                    >
                        <image :src="item" mode="widthFix" class="full-width-image" />
                    </view>
                </template>
            </view>
            <view v-if="activeTab === '2'" class="purchaseNotice">
                <view class="section-title">{{ $t('productDetail.tabs.purchaseNotice') }}</view>
                <view class="purchaseNotice-tips">
                    <uni-icons type="info-filled" size="20" color="#1d4ed8" style="margin-right: 10rpx"></uni-icons>
                    {{ $t('productDetail.active.readCarefully') }}
                </view>
                <view v-if="activeDetail.purchaseNotice.validity" class="purchaseNotice-item">
                    <view class="purchaseNotice-item-title">{{ $t('productDetail.active.validity') }}</view>
                    <view
                        v-for="(item, index) in activeDetail.purchaseNotice.validity"
                        :key="index"
                        class="purchaseNotice-item-desc"
                    >
                        {{ item }}
                    </view>
                </view>
                <view v-if="activeDetail.purchaseNotice.usedTime" class="purchaseNotice-item">
                    <view class="purchaseNotice-item-title">{{ $t('productDetail.active.usedTime') }}</view>
                    <view
                        v-for="(item, index) in activeDetail.purchaseNotice.usedTime"
                        :key="index"
                        class="purchaseNotice-item-desc"
                    >
                        {{ item }}
                    </view>
                </view>
                <view v-if="activeDetail.purchaseNotice.refundRules" class="purchaseNotice-item">
                    <view class="purchaseNotice-item-title">{{ $t('productDetail.active.refundRules') }}</view>
                    <view
                        v-for="(item, index) in activeDetail.purchaseNotice.refundRules"
                        :key="index"
                        class="purchaseNotice-item-desc"
                    >
                        <text class="with-dot">{{ item }}</text>
                    </view>
                </view>
                <view v-if="activeDetail.purchaseNotice.usageDesc" class="purchaseNotice-item">
                    <view class="purchaseNotice-item-title">{{ $t('productDetail.active.usageDesc') }}</view>
                    <view
                        v-for="(item, index) in activeDetail.purchaseNotice.usageDesc"
                        :key="index"
                        class="purchaseNotice-item-desc"
                    >
                        {{ item }}
                    </view>
                </view>
                <view v-if="activeDetail.purchaseNotice.safetyRules" class="purchaseNotice-item">
                    <view class="purchaseNotice-item-title">{{ $t('productDetail.active.safetyRules') }}</view>
                    <view class="purchaseNotice-item-desc">{{ $t('productDetail.active.safetyTips') }}</view>
                    <view
                        v-for="(item, index) in activeDetail.purchaseNotice.safetyRules"
                        :key="index"
                        class="purchaseNotice-item-desc"
                    >
                        <text class="with-dot">{{ item }}</text>
                    </view>
                </view>
            </view>
            <view v-if="activeTab === '3'" class="usageGuideStep">
                <view class="section-title">{{ $t('productDetail.tabs.usageGuide') }}</view>
                <view v-for="(item, index) in activeDetail.usageGuideStep" :key="index" class="usageGuideStep-item">
                    <view class="item-index">{{ index + 1 }}</view>
                    <view class="item-intro">
                        <view class="item-title">{{ item.title }}</view>
                        <view class="item-desc">{{ item.description ||''}}</view>
                    </view>
                </view>
            </view>
            <view v-if="activeTab === '4'" class="feeDescription">
                <view class="section-title">{{ $t('productDetail.tabs.feeDescription') }}</view>
                <view class="feeDescription-table">
                    <view class="table-header">
                        <view class="table-header-item half-width">{{ $t('productDetail.active.project') }}</view>
                        <view class="table-header-item quarter-width">{{ $t('productDetail.active.fee') }}</view>
                        <view class="table-header-item quarter-width">{{ $t('productDetail.active.description') }}</view>
                    </view>
                    <view class="table-body">
                        <view
                            v-for="(item, index) in activeDetail.feeDescription.items"
                            :key="index"
                            class="table-row"
                        >
                            
                            <view class="table-cell half-width">{{ item.name || '' }}</view>
                            <view class="table-cell quarter-width">{{ item.price || '' }}</view>
                            <view class="table-cell quarter-width">{{ item.note || '' }}</view>
                        </view>
                    </view>
                </view>
                <view class="feeDescription-tips" v-if="activeDetail.feeDescription.notice">
                    <uni-icons type="info-filled" size="20" color="#eab308" style="margin-right: 10rpx"></uni-icons>
                    {{activeDetail.feeDescription.notice }}
                </view>
            </view>
            <view v-if="activeTab === '5'" class="otherNotice">
                <view class="section-title">{{ $t('productDetail.tabs.otherNotice') }}</view>
                <view
                    v-if="activeDetail.otherNotice.faq"
                    class="otherNotice-item"
                    :style="{ height: isExpanded[0] ? 'auto' : '60px', overflow: isExpanded[0] ? 'visible' : 'hidden' }"
                >
                    <view class="otherNotice-item-title-container">
                        <view class="otherNotice-item-title">{{ $t('productDetail.active.faq') }}</view>
                        <uni-icons 
                            :type="isExpanded[0] ? 'up' : 'down'" 
                            size="20" 
                            color="#1F2937" 
                            @click="toggleExpand(0)"
                        />
                    </view>
                    <view
                        v-for="(item, index) in activeDetail.otherNotice.faq"
                        :key="index"
                        class="otherNotice-item-desc"
                    >
                        <view class="otherNotice-item-desc-q">Q：{{ item.question }}</view>
                        <view class="otherNotice-item-desc-a">A：{{ item.answer }}</view>
                    </view>
                </view>
                <view
                    v-if="activeDetail.otherNotice.transportation"
                    class="otherNotice-item"
                    :style="{ height: isExpanded[1] ? 'auto' : '60px', overflow: isExpanded[1] ? 'visible' : 'hidden' }"
                >
                    <view class="otherNotice-item-title-container">
                        <view class="otherNotice-item-title">{{ $t('productDetail.active.transportation') }}</view>
                        <uni-icons 
                            :type="isExpanded[1] ? 'up' : 'down'" 
                            size="20" 
                            color="#1F2937" 
                            @click="toggleExpand(1)"
                        />
                    </view>
                    <view
                        v-for="(item, index) in activeDetail.otherNotice.transportation"
                        :key="index"
                        class="otherNotice-item-tran"
                    >
                        <view v-if="item.icon" class="otherNotice-item-tran-left">
                            <image v-if="item.icon" :src="item.icon" class="item-icon" mode="aspectFit" />
                        </view>
                        <view class="otherNotice-item-desc">
                            <view class="otherNotice-item-desc-q">{{ item.title }}</view>
                            <view class="otherNotice-item-desc-a">{{ item.description }}</view>
                        </view>
                    </view>
                </view>
                <view
                    v-if="activeDetail.otherNotice.contact"
                    class="otherNotice-item"
                    :style="{ height: isExpanded[2] ? 'auto' : '60px', overflow: isExpanded[2] ? 'visible' : 'hidden' }"
                >
                    <view class="otherNotice-item-title-container">
                        <view class="otherNotice-item-title">{{ $t('productDetail.active.contact') }}</view>
                        <uni-icons 
                            :type="isExpanded[2] ? 'up' : 'down'" 
                            size="20" 
                            color="#1F2937" 
                            @click="toggleExpand(2)"
                        />
                    </view>
                    <view
                        v-for="(item, index) in activeDetail.otherNotice.contact"
                        :key="index"
                        class="otherNotice-item-desc"
                    >
                        <uni-icons type="phone-filled" size="20" color="#6b7280" style="margin-right: 10rpx" class="rotated-icon"></uni-icons>
                        {{ item }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'ActiveDetail',
    props: {
        activeDetail: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            tabs: [
                { label: this.$t('productDetail.tabs.introduction'), key: '1' },
                { label: this.$t('productDetail.tabs.purchaseNotice'), key: '2' },
                { label: this.$t('productDetail.tabs.usageGuide'), key: '3' },
                { label: this.$t('productDetail.tabs.feeDescription'), key: '4' },
                { label: this.$t('productDetail.tabs.otherNotice'), key: '5' },
                { label: this.$t('productDetail.tabs.userReviews'), key: '6' },
            ],
            activeTab: '1',
            isExpanded: [false, false, false] 
        }
    },
    watch: {
        activeDetail: {
            immediate: true,
            handler(newVal) {
                if (newVal && newVal.otherNotice) {
                    this.isExpanded = [
                        newVal.otherNotice.faq && newVal.otherNotice.faq.length > 0,
                        newVal.otherNotice.transportation && newVal.otherNotice.transportation.length > 0,
                        newVal.otherNotice.contact && newVal.otherNotice.contact.length > 0
                    ];
                }
            }
        }
    },
    created() {
        this.switchTab(this.activeTab, false); 
    },
    methods: {
        switchTab(key, flag = true) {
            if (this.activeTab === key && flag) return;
            this.activeTab = key;
            let isShowComment = false;
            if (key === '6') isShowComment = true;
            this.$emit('myHtmlShowComment', isShowComment);
        },
        toggleExpand(index) {
            this.$set(this.isExpanded, index, !this.isExpanded[index]);
        }
    }
}
</script>

<style lang="scss" scoped>
.active-page {
    position: relative;
    padding-top: 80rpx;
    &-tabs {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 100;
        border-bottom: 1rpx solid #eee;
        .scroll-tabs {
            white-space: nowrap;
            padding: 20rpx 0;
        }
        .tab-item {
            display: inline-block;
            padding: 0 30rpx;
            font-size: 30rpx;
            // color: #666;
            line-height: 60rpx;
            &.active {
                color: #498FFF;
                font-weight: bold;
                border-bottom: 4rpx solid #498FFF;
            }
        }
    }
    .section {
        background-color: #fff;
        margin-top: 20rpx;
        padding: 0 32rpx 20rpx;
		.introduction-description{
			font-size: 30rpx;
		}
        &-title {
            font-size: $uni-font-size-lg;
            font-weight: bold;
            line-height: 80rpx;
            display: flex;
            align-items: center;
            &::before {
                content: '';
                display: inline-block;
                width: 8rpx;
                height: 1em;
                background-color: #498FFF;
                margin-right: 10rpx;
            }
        }
        .introduction {
            &-subTitle {
                line-height: 60rpx;
                font-weight: 500;
            }
            &-features {
                font-size: $uni-font-size-base;
            }
            &-imageUrlList {
                margin: 20rpx 0;
                &:last-child {
                    margin-bottom: 0;
                }
                .full-width-image {
                    width: 100%;
                    height: 300rpx;
                    object-fit: cover;
                    border-radius: 16rpx;
                }
            }
        }
        .purchaseNotice {
            &-tips {
                padding: 24rpx;
                display: flex;
                align-items: center;
                background-color: #eff6ff;
                border-radius: 24rpx;
                color: #1d4ed8;
                font-size: $uni-font-size-sm;
            }
            &-item {
                &-title {
                    font-size: $uni-font-size-base;
                    line-height: 60rpx;
                    font-weight: 600;
                }
                &-desc {
                    font-size: $uni-font-size-base;
                    line-height: 48rpx;
                }
            }
        }
        .usageGuideStep {
            &-item {
                display: flex;
                align-items: center;
                margin-bottom: 24rpx;
                &:last-child {
                    margin-bottom: 0;
                }
                .item-index {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 48rpx;
                    height: 48rpx;
                    background-color: #3b82f6;
                    border-radius: 50%;
                    color: #fff;
                    margin-right: 16rpx;
                    font-size: $uni-font-size-base;
                }
                .item-intro {
                    .item-title {
                        font-size: $uni-font-size-base;
                        font-weight: 500;
                    }
                    .item-desc {
                        font-size: $uni-font-size-sm;
                    }
                }
            }
        }
        .feeDescription {
            &-table {
                width: 100%;
                border: 1rpx solid #eee;
                border-radius: 8rpx;
                overflow: hidden;
                .table-header {
                    display: flex;
                    background-color: #f5f5f5;
                    &-item {
                        padding: 20rpx;
                        font-weight: bold;
                        text-align: center;
                        font-size: $uni-font-size-sm;
                        &:nth-child(1) {
                            text-align: left;
                        }
                        &:nth-child(2) {
                            text-align: center;
                        }
                        &:nth-child(3) {
                            text-align: right;
                        }
                    }
                }
                .table-body {
                    display: flex;
                    flex-direction: column;
                    .table-row {
                        display: flex;
                        border-bottom: 1rpx solid #eee;
                        &:last-child {
                            border-bottom: none;
                        }
                        .table-cell {
                            padding: 20rpx;
                            text-align: center;
                            font-size: $uni-font-size-sm;
                            &:nth-child(1) {
                                text-align: left;
                            }
                            &:nth-child(2) {
                                text-align: center;
                            }
                            &:nth-child(3) {
                                text-align: right;
                            }
                        }
                    }
                }
                .half-width {
                    width: 50%;
                }
                .quarter-width {
                    width: 25%;
                }
            }
            &-tips {
                margin-top: 24rpx;
                padding: 24rpx;
                display: flex;
                align-items: center;
                background-color: #fefce8;
                border-radius: 24rpx;
                color: #a16207;
                font-size: $uni-font-size-sm;
            }
        }
        .otherNotice {
            &-item {
                margin-top: 24rpx;
                padding: 16rpx;
                border: 1px solid #e5e7eb;
                border-radius: 24rpx;
                &:nth-child(2) {
                    margin-top: 0;
                }
                &-title-container {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                &-tran {
                    display: flex;
                    &-left {
                        width: 48rpx;
                        margin-right: 24rpx;
                        .item-icon {
                            width: 48rpx;
                            height: 48rpx;
                        }
                    }
                }
                &-desc {
                    margin-top: 16rpx;
                    word-break: break-all;
                    &-q {
                        font-size: $uni-font-size-base;
                        line-height: 48rpx;
                    }
                    &-a {
                        font-size: $uni-font-size-sm;
                        line-height: 32rpx;
                    }
                }
            }
        }
    }
    .with-dot {
        position: relative;
        padding-left: 20rpx;
		//因为未优化，暂时注释
        // &::before {
        //     content: '';
        //     position: absolute;
        //     left: 0;
        //     top: 50%;
        //     transform: translateY(-50%);
        //     width: 10rpx;
        //     height: 10rpx;
        //     background-color: #ccc;
        //     border-radius: 50%;
        // }
    }
    .rotated-icon {
        display: inline-block;
        transform: rotate(-90deg);
    }
}
</style>